<template>
	<div class="recommend-item">
		<div class="text">
			<p class="title"><slot name="title"></slot></p>
			<p class="contain"><slot name="contain"></slot></p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "RecommentItem"
	}
</script>

<style scoped>
	@media screen and (max-width: 992px) {
		.recommend-item {
			height: 5rem;
		}
		.recommend-item .text .contain {
			display: none;
		}
	}

	.recommend-item{
		width: 100%;
		height: 100%;
		border-radius: .05rem;
	}
	.recommend-item {
		position: relative;
		color: #FFFFFF;
	}
	.recommend-item .text {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 85%;
		padding-bottom: .1rem;
		overflow: hidden;
	}
	.recommend-item .text .title {
		font-size: .23rem;
		padding-bottom: .1rem;
	}
	.recommend-item .text .contain {
		color: #bdc3c7;
	}
	/*增加css选择器权重*/
	.recommend-chapter .right .top p,
	.recommend-chapter .right .bottom p {
		font-size: .13rem;
	}
</style>
